<template>
	<section>

		<!--列表-->
    <!--sortable  排序的小箭头-->
		<el-table :data="department" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
      <el-table-column prop="id" label="id编号" width="120" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="部门编号" width="120" sortable>
      </el-table-column>
			<el-table-column prop="name" label="姓名" width="120" sortable>
			</el-table-column>
			<el-table-column prop="dirPath" label="部门的上级分类层级id" width="100" sortable>
			</el-table-column>
			<el-table-column prop="state" label="部门状态" width="100" sortable>
        <template scope="scope">
          <span size="small" v-if="scope.row.state === 0" style="color: #11b95c" >启用</span>
          <span size="small" v-else-if="scope.row.state === -1" style="color: red" >禁用</span>
          <span size="small" v-else style="color: #8c939d" >未知</span>
        </template>
			</el-table-column>
			<el-table-column prop="manager.username" label="部门管理员" width="120" sortable>
			</el-table-column>
			<el-table-column prop="parent.name" label="上级部门" min-width="180" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

    <!--分页条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination :page-sizes="sizeList"
                     @size-change="handleSizeChange"
                     layout="sizes,prev, pager, next"
                     @current-change="handleCurrentChange"
                     :page-size="pageSize"
                     :total="total"
                     :current-page="currentPage"
                     style="float:right;">
      </el-pagination>
    </el-col>




	</section>
</template>

<script>

	export default {
		data() {
			return {
        listLoading: false,
        department:[],  //开启加载效果
        sels: [],   //列表选中列
        total:0,     //数据总条数
        pageSize:10, //每页展示条数
        currentPage:1,  //页数为多少页
        sizeList:[5, 10, 15, 20],
      }
		},
		methods: {
		  // sizeList:[5, 10, 15, 20],选择变化的时候,产生的变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        // 重新加载列表
        this.loadListData();
      },
		  //  val 就是要展示的当前页
      handleCurrentChange(val){
        //动态改变currentPage 页码
        this.currentPage=val;
        //重新加载列表
        this.loadListData();
        console.log("你好: " +  val);

      },
		  // 批量删除
      batchRemove(){

      },
      //当用户勾选数据的时候 触发
      selsChange: function (sels) {
        this.sels = sels;
      },
      //加载列表数据
      loadListData(){
        //准备数据
        let param = {
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
        this.$http.post("http://localhost:8080/dept/page",param)
          .then(result=>{
            console.log(result)
            this.department = result.data.data;
            this.total = result.data.total;
          })
      },

		},
		mounted() {
      //页面加载完毕以后立即执行
      this.loadListData();
		}
	}

</script>

<style scoped>

</style>